<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:makeFoods
     -->
    <div class="QS-content-template QS-makeFoods">
        
        

        <div class="makeFoods_label">
            <span class="makeFoods_label_tip">配餐分类</span>
            <div class="makeFoods_input">
                <el-radio v-model="recipeType" label="早餐" disabled>早餐</el-radio>
                <el-radio v-model="recipeType" label="午餐" disabled>午餐</el-radio>
                <el-radio v-model="recipeType" label="晚餐" disabled>晚餐</el-radio>
            </div>
        </div>
        <div class="makeFoods_label">
            <span class="makeFoods_label_tip">制作难度</span>
            <div class="makeFoods_input">
                <el-radio v-model="makingDiff" label="困难">困难</el-radio>
                <el-radio v-model="makingDiff" label="中等">中等</el-radio>
                <el-radio v-model="makingDiff" label="简单">简单</el-radio>
            </div>
        </div>
        <div class="makeFoods_label makeFoods_input_time">
            <span class="makeFoods_label_tip">制作时间</span>
            <div class="makeFoods_input">
                <el-slider v-model="makingTime" :marks="marks" :format-tooltip="formatTooltip"></el-slider>
            </div>
        </div>
        <div class="makeFoods_label">
            <span class="makeFoods_label_tip">配餐名称</span>
            <div class="makeFoods_input">
                <el-input 
                    v-model="recipeName"
                    placeholder="请输入配餐名称"
                    clearable
                ></el-input>
            </div>
        </div>
        <!-- <div class="makeFoods_label">
            <span class="makeFoods_label_tip">列表图片</span>
            <div class="makeFoods_input">
                <el-upload
                    class="avatar-uploader uploader_small"
                    :action="$commonFunc.imageAPI()"
                    :show-file-list="false"
                    :on-success="listUrlSuccess"
                    :before-upload="beforeAvatarUpload">
                        <img v-if="listUrl" :src="listUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
        </div> -->
        <div class="makeFoods_label">
            <span class="makeFoods_label_tip">配餐图片</span>
            <div class="makeFoods_input">
                <el-upload
                    class="avatar-uploader uploader_small"
                    :action="$commonFunc.imageAPI()"
                    :show-file-list="false"
                    :on-success="recipePictureAddressSuccess"
                    :before-upload="beforeAvatarUpload">
                        <img v-if="recipePictureAddress" :src="$commonFunc.checkThePic(recipePictureAddress)" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
        </div>
        <!-- 配餐主料 -->
        <div v-for="(item,index) in mainFoods" :key="index" class="makeFoods_label">
            <span class="makeFoods_label_tip">配餐主料</span>
            <div class="makeFoods_input">
                <el-input 
                    v-model="item.makingName"
                    placeholder="请输入用料名称"
                    clearable
                ></el-input>
            </div>
            <span class="makeFoods_label_tip">用料数量</span>
            <div class="makeFoods_input_small">
                <el-input 
                    v-model="item.makingNum"
                    placeholder="请标明数量及单位，如 10克"
                    clearable
                ></el-input>
            </div>
            <i @click="delmainFoods(index)" v-show="item.iconFlag" class="el-icon-delete add_foods_del"></i>
            <i v-show="!item.iconFlag" class="add_foods_del add_foods_del_station"></i>
        </div>
        <div class="makeFoods_label_add">
            <i @click="addmainFoods" class="el-icon-circle-plus-outline add_foods_icon"></i>
        </div>
        <!-- 配餐辅料 -->
        <div v-for="(item,index) in subFoods" :key="'sub'+index" class="makeFoods_label">
            <span class="makeFoods_label_tip">配餐辅料</span>
            <div class="makeFoods_input">
                <el-input 
                    v-model="item.subName"
                    placeholder="请输入辅料名称"
                    clearable
                ></el-input>
            </div>
            <span class="makeFoods_label_tip">用料数量</span>
            <div class="makeFoods_input_small">
                <el-input 
                    v-model="item.subNum"
                    placeholder="请标明数量及单位，如 10克"
                    clearable
                ></el-input>
            </div>
            <i @click="delsubFoods(index)" v-show="item.iconFlag" class="el-icon-delete add_foods_del"></i>
            <i v-show="!item.iconFlag" class="add_foods_del add_foods_del_station"></i>
        </div>
        <div class="makeFoods_label_add">
            <i @click="addsubFoods" class="el-icon-circle-plus-outline add_foods_icon"></i>
        </div>

        <!-- 配菜流程 -->
        <div v-for="(item,index) in makingFoods" :key="'cater'+index" class="makeFoods_label">
            <span class="makeFoods_label_tip">配菜做法</span>
            <div class="makeFoods_input">
                <el-input 
                    v-model="item.makingProcess"
                    placeholder="请输入用料名称"
                    clearable
                ></el-input>
            </div>
            <i @click="delmakingFoods(index)" v-show="item.iconFlag" class="el-icon-delete add_foods_del"></i>
            <i v-show="!item.iconFlag" class="add_foods_del add_foods_del_station"></i>
        </div>
        <div class="makeFoods_label_add">
            <i @click="addmakingFoods" class="el-icon-circle-plus-outline add_foods_icon"></i>
        </div>

        <div class="makeFoods_btn">
            <el-button @click="goback" type="info" plain>返回</el-button>
            <el-button @click="resetInfo" type="info" plain>重置</el-button>
            <el-button @click="makeFoodsConfirm" type="primary">确认</el-button>
        </div>
    </div>
</template>

<script>

export default {
	components: {
        
    },
    props:{
        // subData:{
        //     type:Object,
        //     default:null
        // },
        // mainFoodsSub:{
        //     type:Array,
        //     default:null
        // },
        // subFoodsSUb:{
        //     type:Array,
        //     default:null
        // },
        // makingFoodsSub:{
        //     type:Array,
        //     default:null
        // }
    },
	data(){
        
		return {
            recipeType:'早餐',//配餐分类
            makingDiff:'简单',//制作难度
            makingTime:0,//制作时间
            marks: {//给制作时间制作断点
                0: '0',
                30: '30',
                60: '60',
                90: '90',
                // 90: {
                //     style: {
                //         color: '#1989FA'
                //     },
                //     label: this.$createElement('strong', '50%')
                // }
            },
            recipeName:'',//配餐名称
            // listUrl:'',//列表图片
            recipePictureAddress:'',//食物图片
            mainFoods:[{//配餐主料
                makingName:'',//用料名称
                makingNum:'',//用料数量
                iconFlag:false,//删除按钮显隐
            }],//配餐用料
            subFoods:[{//配餐辅料
                subName:'',//用料名称
                subNum:'',//用料数量
                iconFlag:false,//删除按钮显隐
            }],//配餐辅料
            makingFoods:[{//配菜流程
                makingProcess:'',//配餐流程
                iconFlag:false,//删除按钮显隐
            }],//配菜做法
            subData:{},
            mainFoodsSub:[],
            subFoodsSUb:[],
            makingFoodsSub:[],
		}
    },
    mounted(){
        this.subData = this.$route.query.asubData;
        this.mainFoodsSub = this.$route.query.amainFoodsSub;
        this.subFoodsSUb = this.$route.query.asubFoodsSUb;
        this.makingFoodsSub = this.$route.query.amakingFoodsSub;
        var _mainDate = this.$route.query.asubData;
        console.log('重新',_mainDate)
        
        if(_mainDate && Object.keys(_mainDate.item).length != 0){
            this.recipeType = _mainDate.item.recipeType || '早餐';
            this.makingDiff = _mainDate.item.makingDiff || '简单';
            this.makingTime = Number(_mainDate.item.makingTime) || 0;
            this.recipeName = _mainDate.item.recipeName || '';
            this.recipePictureAddress = _mainDate.item.recipePictureAddress || '';
            this.mainFoods = this.mainFoodsSub || [{//配餐主料
                makingName:'',//用料名称
                makingNum:'',//用料数量
                iconFlag:false,//删除按钮显隐
            }];
            this.subFoods = this.subFoodsSUb || [{//配餐辅料
                subName:'',//用料名称
                subNum:'',//用料数量
                iconFlag:false,//删除按钮显隐
            }];
            this.makingFoods = this.makingFoodsSub || [{//配菜流程
                makingProcess:'',//配餐流程
                iconFlag:false,//删除按钮显隐
            }];
        }
    },
    methods:{
        // this.$router.push('/GDPLHasReturned');
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        listUrlSuccess(res, file) {
            this.listUrl = URL.createObjectURL(file.raw);
        },
        recipePictureAddressSuccess(res, file) {
            // this.recipePictureAddress = URL.createObjectURL(file.raw);
                // this.recipePictureAddress = file.response.data.filePath;
            var _this = this;
            this.$commonFunc.limitImgWidth(this,file,{
                width:750,height:600
            },function(url){
                _this.recipePictureAddress = url;
            });
        },
        addmainFoods(){//添加用料
            this.mainFoods.push({
                makingName:'',//用料名称
                makingNum:'',//用料数量
                iconFlag:true,//删除按钮显隐
            });
        },
        delmainFoods(index){//删除用料
            this.mainFoods.splice(index,1);
        },

        addsubFoods(){//添加辅料
            this.subFoods.push({
                subName:'',//用料名称
                subNum:'',//用料数量
                iconFlag:true,//删除按钮显隐
            });
        },
        delsubFoods(index){//删除辅料
            this.subFoods.splice(index,1);
        },

        addmakingFoods(){//添加用料
            this.makingFoods.push({
                makingProcess:'',//配餐流程
                iconFlag:true,//删除按钮显隐
            });
        },
        delmakingFoods(index){//删除用料
            this.makingFoods.splice(index,1);
        },
        makeFoodsConfirm(){//确认按钮
            console.log('this.mainFoods',this.mainFoods);
            console.log('this.subFoods',this.subFoods);
            console.log('this.makingFoods',this.makingFoods);
            this.addOrDelFoods();
        },
        resetInfo(){//重置信息
            this.recipeType = '早餐';
            this.recipeName = '';
            this.recipePictureAddress = '';
            this.mainFoods.splice(0);
            this.mainFoods.push(
                {
                    index:0,
                    makingName:'',//用料名称
                    makingNum:'',//用料数量
                    iconFlag:false,//删除按钮显隐
                }
            );
            this.subFoods.splice(0);
            this.subFoods.push(
                {
                    index:0,
                    subName:'',//用料名称
                    subNum:'',//用料数量
                    iconFlag:false,//删除按钮显隐
                }
            );
            this.makingFoods.splice(0);
            this.makingFoods.push(
                {
                    index:0,
                    makingProcess:'',//配餐流程
                    iconFlag:false,//删除按钮显隐
                }
            );
        },
        formatTooltip(val) {//设置制作时间最大值
            return val * 1;
        },
        addOrDelFoods(){
            this.$post("recipeList/save",{
                id:this.subData?this.subData.item.id:'',//主键
                recipeType:this.recipeType || '早餐',//食谱类别
                makingDiff:this.makingDiff || '简单',//配餐制作难度
                makingTime:this.makingTime.toString() || '',//配餐制作时间
                recipeName:this.recipeName || '',//食谱名称
                recipePictureAddress:this.recipePictureAddress || '',//食谱图片地址
                isDeleted:"N",//是否删除
                mainFoods:JSON.stringify(this.mainFoods).replace(/["]/g,'%2%') || '',//配餐主料
                subFoods:JSON.stringify(this.subFoods).replace(/["]/g,'%2%') || '',//配餐辅料
                makingFoods:JSON.stringify(this.makingFoods).replace(/["]/g,'%2%') || ''//配餐流程
                // mainFoods:this.mainFoods || '',//配餐主料
                // subFoods:this.subFoods || '',//配餐辅料
                // makingFoods:this.makingFoods || ''//配餐流程
                // recipeListPictureAddress:'',//食谱列表展示时图片地址
            }).then(res=>{
            // this.$fetch("recipeList/save?id=&recipeType="+this.recipeType+ "&makingDiff="+this.makingDiff+ "&recipePictureAddress="+this.recipePictureAddress+ "&isDeleted=N" + "&mainFoods="+JSON.stringify(this.mainFoods)+ "&subFoods="+JSON.stringify(this.subFoods)+ "&makingFoods="+JSON.stringify(this.makingFoods))
            // .then(res=>{
                console.log('res+++',res)
                // this.$emit('getFoodsList',0);
                if(res.code == 0){
                    this.$confirm('是否返回列表页?', '', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        // type: 'warning'
                    }).then(() => {
                        this.$router.go(-1);
                    }).catch(() => {        
                    });

                }else{
                    this.$alert('接口报错，请联系管理员', '', {
                        confirmButtonText: '确定',
                        // type: 'warning'
                    }).then(() => {
                    }).catch(() => {        
                    });
                }
            })
        },
        goback(){
            this.$router.go(-1);
        }
    }
}
</script>